<template>
  <div>
    <el-container>
      <el-aside
        :style="{
          width: this.$store.state.isCollapse === false ? '220px' : '64px',
        }"
      >
        <div
          class="side-bar"
          :style="{
            width: this.$store.state.isCollapse === false ? '220px' : '64px',
          }"
        >
          <el-scrollbar style="height: 100%;">
            <side />
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <Header />
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/container/Header.vue";
import Side from "../components/container/Side.vue";
export default {
  components: {
    Header,
    Side,
  },
  name: "Index",
  data() {
    return {};
  },
};
</script>

<style scoped>
.el-container {
  padding: 0;
  margin: 0;
  background-color: #f5f5f5;
}
.el-header {
  padding: 0;
  margin-left: -1px;
  position: fixed;
  z-index: 2;
}
.el-aside {
  display: block;
  position: relative;
  /* overflow-y: auto; */
  overflow-x: hidden;
  transition: 0.5s;
  background-color: #545c64 !important;
}
.side-bar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  transition: 0.5s;
}
.side-bar /deep/ .el-scrollbar__wrap{
  overflow-x: hidden;
}
.el-main {
  z-index: 1;
  margin-top: 80px;
}
</style>
